<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>下拉菜单 dropdown - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>下拉菜单 <sup title="指在该版本新增的组件">2.6+</sup></h1>
<blockquote class="layui-elem-quote">
<p>下拉菜单 <code>dropdown</code> 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的<em class="layui-text-em">下拉菜单</em>，更可用于<em class="layui-text-em">右键菜单</em>来实现更多的交互可能。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">基础用法</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button class="layui-btn demo-dropdown-base">
    <span>下拉菜单</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-base">
    <span>下拉菜单</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</div>
<div class="layui-inline" style="width: 235px;">
  <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
</div>
<div class="layui-inline layui-word-aux layui-font-gray">
  可以绑定任意元素，
  <a href="javascript:;" class="layui-font-blue" id="ID-dropdown-demo-base-text">
    比如这段文字 
    <i class="layui-icon layui-font-12 layui-icon-down"></i>
  </a>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 渲染
  dropdown.render({
    elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101
    },{
      title: 'menu item 3',
      id: 102
    }],
    click: function(obj){
      this.elem.find('span').text(obj.title);
    }
  });
  // 绑定输入框
  dropdown.render({
    elem: '#ID-dropdown-demo-base-input',
    data: [{
      title: 'menu item 1',
      id: 101
    },{
      title: 'menu item 2',
      id: 102
    },{
      title: 'menu item 3',
      id: 103
    },{
      title: 'menu item 4',
      id: 104
    },{
      title: 'menu item 5',
      id: 105
    },{
      title: 'menu item 6',
      id: 106
    }],
    click: function(obj){
      this.elem.val(obj.title);
    },
    style: 'min-width: 235px;'
  });
  // 绑定文字
  dropdown.render({
    elem: '#ID-dropdown-demo-base-text',
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101,
      child: [{  // 横向子菜单
        title: 'menu item 2-1',
        id: 1011
      },{
        title: 'menu item 2-2',
        id: 1012
      }]
    },{
      title: 'menu item 3',
      id: 102
    },{
      type: '-' // 分割线
    },{
      title: 'menu group',
      id: 103,
      type: 'group', // 纵向菜单组
      child: [{
        title: 'menu item 4-1',
        id: 1031
      },{
        title: 'menu item 4-2',
        id: 1032
      }]
    },{
      type: '-' // 分割线
    },{
      title: 'menu item 5',
      id: 104
    },{
      title: 'menu item 5',
      id: 104
    }],
    click: function(obj){
      this.elem.val(obj.title);
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-complex" lay-toc="{level: 2, hot: true}">复杂结构</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<button class="layui-btn" id="ID-dropdown-demo-complex">
  无限层级 + 跳转 + 事件 + 自定义模板
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var util = layui.util;
  // 高级演示 - 复杂结构
  dropdown.render({
    elem: '#ID-dropdown-demo-complex',
    data: [{
      title: 'menu item 1',
      templet: '<i class="layui-icon layui-icon-picture"></i> {{= d.title }} <span class="layui-badge-dot"></span>',
      id: 100,
      href: '#'
    },{
      title: 'menu item 2',
      templet: '<img src="https://unpkg.com/outeres@0.0.11/demo/avatar/0.png" style="width: 16px;"> {{= d.title }} ',
      id: 101,
      href: '/',
      target: '_blank'
    },
    {type: '-'}, // 分割线
    {
      title: 'menu item 3',
      id: 102,
      type: 'group',
      child: [{
        title: 'menu item 3-1',
        id: 103
      },{
        title: 'menu item 3-2',
        id: 104,
        child: [{
          title: 'menu item 3-2-1',
          id: 105
        },{
          title: 'menu item 3-2-2',
          id: 11,
          type: 'group',
          child: [{
            title: 'menu item 3-2-2-1',
            id: 111
          },{
            title: 'menu item 3-2-2-2',
            id: 1111
          }]
        },{
          title: 'menu item 3-2-3',
          id: 11111
        }]
      },{
        title: 'menu item 3-3',
        id: 111111,
        type: 'group',
        child: [{
          title: 'menu item 3-3-1',
          id: 22
        },{
          title: 'menu item 3-3-2',
          id: 222,
          child: [{
            title: 'menu item 3-3-2-1',
            id: 2222
          },{
            title: 'menu item 3-3-2-2',
            id: 22222
          },{
            title: 'menu item 3-3-2-3',
            id: 2222222
          }]
        },{
          title: 'menu item 3-3-3',
          id: 333
        }]
      }]
    },
    {type: '-'},
    {
      title: 'menu item 4',
      id: 4
    },{
      title: 'menu item 5',
      id: 5,
      child: [{
        title: 'menu item 5-1',
        id: 55,
        child: [{
          title: 'menu item 5-1-1',
          id: 5555
        },{
          title: 'menu item 5-1-2',
          id: 55555
        },{
          title: 'menu item 5-1-3',
          id: 555555
        }]
      },{
        title: 'menu item 5-2',
        id: 52
      },{
        title: 'menu item 5-3',
        id: 53
      }]
    },{type:'-'},{
      title: 'menu item 6',
      id: 66,
      type: 'group',
      isSpreadItem: false,
      child: [{
        title: 'menu item 6-1',
        id: 777
      },{
        title: 'menu item 6-2',
        id: 7777
      },{
        title: 'menu item 6-3',
        id: 77777
      }]
    }],
    click: function(item){
      layer.msg(util.escape(JSON.stringify(item)));
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-table" lay-toc="{level: 2, hot: true}">在表格中应用</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<table class="layui-hide" id="ID-dropdown-demo-table"></table>
<script type="text/html" id="ID-dropdown-demo-table-tool">
  <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<!-- import layui --> 
<script>
layui.use(function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  
  // dropdown 在表格中的应用
  table.render({
    elem: '#ID-dropdown-demo-table',
    url: '/static/2.8/json/table/demo5.json',
    title: '用户数据表',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
      {field:'username', title:'用户名', width:120, edit: 'text'},
      {field:'email', title:'邮箱', minWidth:150},
      {fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
    ]],
    limits: [3],
    page: true
  });
  // 行工具事件
  table.on('tool(ID-dropdown-demo-table)', function(obj){
    var that = this;
    var data = obj.data;
      
    if(obj.event === 'edit'){
      layer.prompt({
        formType: 2,
        value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    } else if(obj.event === 'more'){
      // 更多下拉菜单
      dropdown.render({
        elem: that,
        show: true, // 外部事件触发即显示
        data: [{
          title: 'item 1',
          id: 'aaa'
        }, {
          title: 'item 2',
          id: 'bbb'
        }, {
          title: '删除',
          id: 'del'
        }],
        click: function(data, othis){
          //根据 id 做出不同操作
          if(data.id === 'del'){
            layer.confirm('真的删除行么', function(index){
              obj.del();
              layer.close(index);
            });
          } else {
            layer.msg('得到表格下拉菜单 id：'+ data.id);
          }
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
      }) 
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-on" lay-toc="{level: 2}">自定义事件</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'hover'}">
    hover
    <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
    mousedown
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'dblclick'}">
    dblclick - 双击
    <i class="layui-icon layui-icon-circle layui-font-12"></i>
  </button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  
  // 自定义事件
  dropdown.render({
    elem: '.demo-dropdown-on',
    // trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101
    },{
      title: 'menu item 3',
      id: 102
    }]
  });
  
});
</script>
  </textarea>
</pre>
<h3 id="demo-contextmenu" lay-toc="{level: 2, hot: true}">右键菜单</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu">
  <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
</div>
<button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu">
  开启全局右键菜单
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var util = layui.util;
  // 右键菜单
  dropdown.render({
    elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
    trigger: 'contextmenu', // contextmenu
    isAllowSpread: false, // 禁止菜单组展开收缩
    style: 'width: 200px', // 定义宽度，默认自适应
    data: [{
      title: 'menu item 1',
      id: 'test'
    }, {
      title: 'Printing',
      id: 'print'
    },{
      title: 'Reload',
      id: 'reload'
    },{type:'-'},{
      title: 'menu item 3',
      id: '#3',
      child: [{
        title: 'menu item 3-1',
        id: '#1'
      },{
        title: 'menu item 3-2',
        id: '#2'
      },{
        title: 'menu item 3-3',
        id: '#3'
      }]
    },
    {type: '-'},
    {
      title: 'menu item 4',
      id: ''
    },{
      title: 'menu item 5',
      id: '#1'
    },{
      title: 'menu item 6',
      id: '#1'
    }],
    click: function(obj, othis){
      if(obj.id === 'test'){
        layer.msg('click');
      } else if(obj.id === 'print'){
        window.print();
      } else if(obj.id === 'reload'){
        location.reload();
      }
    }
  });
  // 其他操作
  util.event('lay-on', {
    // 全局右键菜单
    contextmenu: function(othis){
      var ID = 'ID-dropdown-demo-contextmenu';
      if(!othis.data('open')){
        dropdown.reload(ID, {
          elem: document // 将事件直接绑定到 document
        });
        layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
        othis.html('取消全局右键菜单');
        othis.data('open', true);
      } else {
        dropdown.reload(ID, {
          elem: '#'+ ID // 重新绑定到指定元素上
        });
        layer.msg('已取消全局右键菜单，恢复默认右键菜单')
        othis.html('开启全局右键菜单');
        othis.data('open', false);
      }
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-align" lay-toc="{level: 2}">水平对齐方式</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{}">
    左对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'center'}">
    居中对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'right'}">
    右对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 水平对齐方式
  dropdown.render({
    elem: '.demo-dropdown-align',
    // align: 'center' // align 已配置在元素 `lay-options` 属性上
    data: [{
      title: 'menu item test 111',
      id: 100
    },{
      title: 'menu item test 222',
      id: 101
    },{
      title: 'menu item test 333',
      id: 102
    }]
  });
  
});
</script>
  </textarea>
</pre>
<h3 id="demo-content" lay-toc="{level: 2, hot: true}">自定义内容</h3>
<p>如下以弹出一个 <code>tab</code> 为例</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<button class="layui-btn" id="ID-dropdown-demo-content">
  自定义内容
  <i class="layui-icon layui-icon-list layui-font-14"></i>
</button>
<style>
.demo-dropdown-tabs{padding: 0 16px;}
</style>
<!-- import layui -->  
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 自定义内容
  dropdown.render({
    elem: '#ID-dropdown-demo-content',
    content: ['<div class="layui-tab layui-tab-brief">',
      '<ul class="layui-tab-title">',
        '<li class="layui-this">Tab header 1</li>',
        '<li>Tab header 2</li>',
        '<li>Tab header 3</li>',
      '</ul>',
      '<div class="layui-tab-content">',
        '<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
        '<div class="layui-tab-item">Tab body 2</div>',
        '<div class="layui-tab-item">Tab body 3</div>',
      '</div>',
    '</div>'].join(''),
    className: 'demo-dropdown-tabs',
    style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
    // shade: 0.3, // 弹出时开启遮罩 --- 2.8+
    ready: function(){
      layui.use('element', function(element){
        element.render('tab');
      });
    }
  });
});
</script>
  </textarea>
</pre>
</div>
<p>在 <code>content</code> 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。</p>
<h2 id="api" lay-toc="{hot: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var dropdown = layui.dropdown</td>
<td>获得 <code>dropdown</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">dropdown.render(options)</a></td>
<td>dropdown 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#reload">dropdown.reload(id, options)</a></td>
<td>完整重载</td>
</tr>
<tr>
<td><a href="index.html#reload">dropdown.reloadData(id, options)</a> <sup>2.8+</sup></td>
<td>仅重载数据或内容</td>
</tr>
<tr>
<td><a href="index.html#close">dropdown.close(id)</a></td>
<td>关闭对应的组件面板</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
<p><code>dropdown.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a>
<br>注 <sup>2.8+</sup> : 除 <code>elem</code> 属性外，其他基础属性也可以直接写在元素的 <code>lay-options=&quot;{}&quot;</code> 属性中。</li>
</ul>
<pre><code class="layui-code">&lt;button class=&quot;layui-btn&quot; id=&quot;ID-test-dropdown&quot;&gt;下拉菜单&lt;/button&gt;
&lt;button class=&quot;layui-btn class-test-dropdown&quot; lay-options=&quot;{
  data: [{title: 'item 1', id: 1}, {title: 'item 2', id: 2}]
}&quot;&gt;下拉菜单&lt;/button&gt;
&lt;button class=&quot;layui-btn class-test-dropdown&quot; lay-options=&quot;{
  data: [{title: 'item A', id: 'a'}, {title: 'item B', id: 'b'}]
}&quot;&gt;下拉菜单&lt;/button&gt;
  
&lt;!-- import layui --&gt;  
&lt;script&gt;
layui.use(function(){
  var dropdown = layui.dropdown;
  // 单个渲染
  dropdown.render({
    elem: '#ID-test-dropdown',
    // …
  });
  // 批量渲染
  dropdown.render({
    elem: '.class-test-dropdown',
    // …
  });
});
&lt;/script&gt;
</code></pre>
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>
<p>绑定元素选择器或 DOM 对象</p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.data">data</a></p>
</td>
<td>
<p>下拉菜单的数据源。格式详见：<a href="index.html#options.data">#data 格式</a></p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
      <td>id</td>
<td>
<p>设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 <code>elem</code> 属性绑定的元素中的 <code>id</code> 属性值中获取。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>trigger</td>
<td>
<p>触发组件的事件类型。支持所有事件，如： <code>click,hover,mousedown,contextmenu</code> 等</p>
</td>
<td>string</td>
<td>
<p><code>click</code></p>
</td>
    </tr>
    <tr>
<td>show</td>
<td>
<p>是否渲染即显示组件面板。该属性一般在重载方法中传递。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>align</td>
<td>
<p>下拉面板相对绑定元素的水平对齐方式。支持以下可选值：</p>
<ul>
<li><code>left</code> 左对齐（默认）</li>
<li><code>center</code> 居中对齐</li>
<li><code>right</code> 右对齐</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>left</code></p>
</td>
    </tr>
    <tr>
<td>isAllowSpread</td>
<td>
<p>是否允许菜单组展开收缩</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>isSpreadItem</td>
<td>
<p>是否初始展开子菜单</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>delay</td>
<td>
<p>延迟关闭的毫秒数。当 <code>trigger: 'hover'</code> 时才生效</p>
</td>
<td>number</td>
<td>
<p><code>300</code></p>
</td>
    </tr>
    <tr>
<td>className</td>
<td>
<p>自定义组件主容器的样式类名，从而在外部重新定义样式。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>style</td>
<td>
<p>设置组件主容器的 <code>CSS</code> 样式。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>shade <sup>2.8+</sup></td>
<td>
<p>设置弹出时的遮罩。支持以下方式赋值：</p>
<ul>
<li>若值为 <code>number</code> 类型，则表示为遮罩透明度，如:
<br><code>shade: 0.3</code></li>
<li>若值为 <code>array</code> 类型，则可同时设置透明度和背景色，如:
<br><code>shade: [0.3, '#000']</code></li>
</ul>
</td>
<td>number<br>array</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>templet</td>
<td>
<p>全局定义菜单的列表模板，可添加任意 <code>html</code> 字符，且支持 <a href="../laytpl/index.html">laytpl</a> 模板语法。用法详见：<a href="index.html#demo-complex">#示例</a></p>
<p>注 <sup>2.8+</sup> : 模板亦可采用函数写法：</p>
<pre><code class="layui-code">templet: function(d){
  return '&lt;i class=&quot;layui-icon layui-icon-tips&quot;&gt;&lt;/&gt; ' + d.title;
}
</code></pre>
</td>
<td>string<br>function</td>
<td>-</td>
    </tr>
    <tr>
<td>content</td>
<td>
<p>自定义组件内容，从而替代默认的菜单结构。用法详见：<a href="index.html#demo-content">#示例</a></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>clickScope <sup>2.8+</sup></td>
<td>
<p>设置触发点击事件的菜单范围。 支持以下可选值：</p>
<ul>
<li><code>all</code> : 即代表父子菜单均可触发事件</li>
</ul>
<p>默认无需设置，即父级菜单不触发事件</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td colspan="4" style="text-align: center"> 
<div id="options.callback" lay-pid="options" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>ready</td>
<td colspan="3">
<p>组件成功弹出后的回调函数。返回的参数如下：</p>
<pre><code class="layui-code">ready: function(elemPanel, elem){
  console.log(elemPanel); // 组件面板元素对象
  console.log(elem); // 当前组件绑定的目标元素对象
}   
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.click">click</a></p>
</td>
<td colspan="3">
<div id="options.click" lay-pid="options" class="ws-anchor">
菜单项被点击时的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">click: function(data, othis){
  console.log(data); // 当前所点击的菜单项对应的数据
  console.log(othis); // 当前所点击的菜单项元素对象
  console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用
  
  // 若返回 false，则点击选项可不关闭面板 --- 2.8+
  /*
  return false;
  */
</code></pre>
<p>用法详见：<a href="index.html#examples">#示例</a></p>
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>title</td>
<td>
<p>菜单标题</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>id</td>
<td>
<p>菜单 ID。用户菜单项唯一索引</p>
</td>
<td>number/string</td>
<td>-</td>
    </tr>
    <tr>
<td>type</td>
<td>
<p>菜单项的类型，支持的可选值如下：</p>
<ul>
<li><code>normal</code> 普通菜单项（默认）</li>
<li><code>group</code> 纵向组合收缩菜单</li>
<li><code>parent</code> 横向父级菜单</li>
<li><code>-</code> 分割线</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>normal</code></p>
</td>
    </tr>
    <tr>
<td>href</td>
<td>
<p>菜单项的 url 地址。若填写，点击菜单将直接发生跳转。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>target</td>
<td>
<p>菜单 url 打开方式，需设置 <code>href</code> 属性后才生效。 一般可设为 <code>_blank</code> 或 <code>_self</code> 等</p>
</td>
<td>string</td>
<td>
<p><code>_self</code></p>
</td>
    </tr>
    <tr>
<td>disabled <sup>2.8+</sup></td>
<td>
<p>菜单项是否禁用状态</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>templet</td>
<td>
<p>自定义当前菜单项模板，优先级高于基础属性 <code>templet</code></p>
</td>
<td>string/function</td>
<td>-</td>
    </tr>
    <tr>
<td>child</td>
<td>
<p>子级菜单数据集合。参数同父级，可无限嵌套。</p>
</td>
<td>array</td>
<td>-</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="reload" lay-toc="{level: 2, hot: true}">重载</h3>
<p>即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式：</p>
<table class="layui-table">
<thead>
<tr>
<th>重载方式</th>
<th>API</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#dropdown.reload">完整重载</a></td>
<td><a href="index.html#dropdown.reload">dropdown.reload(id, options, deep)</a></td>
</tr>
<tr>
<td><a href="index.html#dropdown.reloadData">仅数据或内容重载</a> <sup>2.8+</sup></td>
<td><a href="index.html#dropdown.reloadData">dropdown.reloadData(id, options, deep)</a></td>
</tr>
</tbody>
</table class="layui-table">
<p>两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。</p>
<h4 id="dropdown.reload" lay-pid="reload" class="ws-anchor ws-bold">完整重载</h4>
<p><code>dropdown.reload(id, options);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<button class="layui-btn" id="ID-dropdown-demo-reload">
  <span>下拉菜单</span>
  <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 渲染
  dropdown.render({
    elem: '#ID-dropdown-demo-reload',
    data: [{
      title: 'menu item 1',
      id: 100
    }, {
      title: '重载该面板',
      id: 101
    }],
    click: function(data){
      if(data.id === 101){ // 菜单项对应设置的 id 值
        // 重载方法
        dropdown.reload('ID-dropdown-demo-reload', {
          data: [{ // 重新赋值 data
            title: '新选项 1',
            id: 111
          }, {
            title: '新选项 2',
            id: 222
          }], 
          show: true // 重载即显示组件面板
        });
        return false; // 点击该选项，阻止面板关闭
      }
    }
  });
});
</script>
  </textarea>
</pre>
<h4 id="dropdown.reloadData" lay-pid="reload" class="ws-anchor ws-bold">仅数据或内容重载 <sup>2.8+</sup></h4>
<p><code>dropdown.reloadData(id, options);</code></p>
<ul>
<li>参数同 <code>dropdown.reload(id, options)</code> 参数</li>
</ul>
<p>使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">输入时重载</label>
    <div class="layui-input-inline">
      <input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var $ = layui.$;
  // 渲染
  var inst = dropdown.render({
    elem: '#ID-dropdown-demo-reloadData',
    data: [
      { id: 1, title: "Python" },
      { id: 2, title: "JavaScript" },
      { id: 3, title: "Java" },
      { id: 4, title: "C++" },
      { id: 5, title: "PHP" },
      { id: 6, title: "Ruby" },
      { id: 7, title: "Swift" },
      { id: 8, title: "TypeScript" },
      { id: 9, title: "Kotlin" },
      { id: 10, title: "Go" }
    ],
    style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
    click: function(data){
      this.elem.val(data.title);
    }
  });
  // 输入框输入事件
  $(inst.config.elem).on('input propertychange', function(){
    var elem = $(this);
    var value = elem.val().trim();
    // 匹配到对应内容时，重载数据
    var dataNew = inst.config.data.filter(function(item){
      var exp = new RegExp(value.split('').join('|'), 'i');
      return exp.test(item.title);
    });
    dropdown.reloadData(inst.config.id, {
      data: dataNew, // 匹配到的新数据
      templet: function(d){
        var exp = new RegExp(value.split('').join('|'), 'gi');
        return d.title.replace(exp, function (str) {
          return '<span style="color: red;">' + str + '</span>'
        });
      }
    });
  });
});
</script>
  </textarea>
</pre>
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭面板 <sup>2.8+</sup></h3>
<p><code>dropdown.close(id);</code></p>
<ul>
<li>参数 <code>id</code> : 组件渲染时定义的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于关闭对应的 <code>dropdown</code> 组件面板。</p>
<pre><code class="layui-code">var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 关闭对应的组件面板
dropdown.close('test');
</code></pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/dropdown/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>